.card .ivu-card-body{
  display: flex;
  flex-direction: column;
}
.img-manager-btn-container{
  display: flex;
  justify-content: space-between;
  padding: 5px;
  border-bottom: #ecf0f5 1px solid;
}
.btn-op-wrap{
  display: flex;
}
.content{
  flex-grow: 1;
}
.left-wrap{
  height:100%;
  padding: 5px;
  background-color: #fafafa;
}
.right-wrap{
  height:100%;
  padding: 2px;
  background-color: #f5f7f9;
}
.btn{
  margin: 0 5px;
}
.add-folder{
  text-align: center;
  background-color: #ffffff;
  border: #d5dbe0 1px solid;
  margin: 2px 0;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.add-folder:hover{
  background-color: #fafafa;
}
.catalog-item{
  padding:4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all .35s ease-in-out;
  border-radius: 4px;
}
.catalog-item:hover{
  background-color: #ececec;
}
.hide{
  display: none;
}
.catalog-item:hover .showOp{
  display: inline-block;
}
.catalog-checked{
  background-color: #ececec;
}
.ivu-card-body{
  height:100%;
}
.imgs-wrap{
  display: flex;
  flex-wrap: wrap;
}
.img-item{
  margin: 4px;
  height:128px;
  width: 128px;
  padding: 4px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  transition: box-shadow .35s ease-in-out;
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
  background-color: #eeeeee;
}
.item-selected{
  border:#2d8cf0 2px solid;
}
.item-check{
  left: 40%;
  top: 35%;
  position: absolute;
}
.item-view{
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  cursor: pointer;
}
.img-item:hover{
  box-shadow: #dccfcf 2px 2px 6px 2px
}
.item-del{
  display: none;
  right:0;
  top: 0;
  position:absolute;
  cursor: pointer;
}
.item-top{
  display: none;
  background-color: rgba(93, 87, 87, 0.62);
  position: absolute;
  height: 30px;
  top: 0px;
  left: 0px;
  width: 100%;
}
.img-item:hover .item-del,.img-item:hover .item-view{
  display: inline-block;
}
.img-item:hover .item-top{
  display: inline-block;
}
.mask{
  left:0;
  top: 0;
  position:absolute;
  display: inline-block;
  width: 100%;
  height:100%;
  background-color: rgba(93, 87, 87, 0.62);
}
.item-img{
  max-width: 120px;
  max-height: 120px;
}

span.item-name {
  color: white;
  background-color: rgba(93, 87, 87, 0.62);
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  overflow: hidden;/*超出部分隐藏*/
  text-overflow:ellipsis;/* 超出部分显示省略号 */
  white-space: nowrap;/*规定段落中的文本不进行换行 */
}
.imgs-container{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
